<template>
    <HeaderSearch></HeaderSearch>
    <headerMenu :is-search-product="true"></headerMenu>

    <div class="content">
        <div class="like_left">
            <div>
                <h1 style="text-align: center;">商品收藏</h1>
                <h2 v-if="userId == null" style="color: red; text-align: center;">当前未登录用户</h2>
                <ul v-for="(product, index) in likeProList" :key="product.id">

                    <li style="border: black solid 1px">
                        <a @click.prevent="toProductDetail(product.id)">
                            <div class="name"><span v-html="product.name"></span>
                            </div>
                            <div class="price">
                                <span>￥<span>{{ product.price }}</span></span> &nbsp;
                            </div>
                            <div class="img"><img :src="url + product.fileName" width="185" height="155" /></div>
                        </a>
                    </li>
                </ul>

            </div>
        </div>
        <span class="like_left2">&nbsp;</span>
        <div class="fresh_mid" style="height: 443px;">

            <ul v-for="(product, index) in pageBean.list" :key="product.id">
                <li style="border: black solid 1px">
                    <a @click.prevent="toProductDetail(product.id)">
                        <div class="name"><span v-html="product.name"></span>
                        </div>
                        <div class="price">
                            <span>￥<span>{{ product.price }}</span></span> &nbsp;
                        </div>
                        <div class="img"><img :src="url + product.fileName" width="185" height="155" /></div>
                    </a>
                </li>
            </ul>

            <div style="position: absolute; right: 310px; top:700px;" v-if="pageBean.pages > 1">
                <span>共 {{ pageBean.total }} 条记录</span>
                <span>{{ pageBean.pageNum }} / {{ pageBean.pages }}</span>
                <button @click="changePage(1)">首页</button>
                <button @click="changePage(pageBean.pageNum - 1)" :disabled="pageBean.pageNum === 1">上一页 </button>

                <button v-for="page in pageBean.navigatePages" :key="page" @click="changePage(page)" :disabled="pageBean.pageNum === page"
                     style="margin: 5px;"> {{ page }} </button>

                <button @click="changePage(pageBean.pageNum + 1)"
                    :disabled="pageBean.pageNum === pageBean.pages">下一页</button>
                <button @click="changePage(pageBean.pages)">末页</button>

            </div>
            <h1 v-if="pageBean.pages < 1" style="text-align: center;">暂无相关数据</h1>
        </div>

    </div>



</template>


<script setup>
import { onMounted, ref, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { watch } from 'vue'
import axios from 'axios'
import store from '@/store'
import HeaderSearch from '@/components/HeaderSearch.vue'
import HeaderMenu from '@/components/HeaderMenu.vue'

const router = useRouter()
const route = useRoute()

const likeProList = ref({})
const userId = window.sessionStorage.getItem('id')
const url = "http://192.168.12.159:83/"

const pageBean = ref({
    list: [],
    pageNum: 1,
    pageSize: 6,
    total: 0,
    pages: 0,
    navigatepageNums: []
})


const tpye = ref('')
const query = ref('')


//收藏
const CollectProduct = async () => {
    if (!userId) {
        return
    }
    const response = await axios.post('/api/selectCollectProduct', {
        userId: userId,
    })

    likeProList.value = response.data.likeProductList
}
//名字搜索
const searchProduct = async (searchName, pageNum = 1) => {
    tpye.value = 'name'
    query.value = searchName || ''

    console.log("searchName", searchName);

    const response = await axios.get('/api/proList', {
        params: {
            pageNum: pageNum,
            pageSize: 6,
            name: searchName || '',
        }
    })

    pageBean.value = response.data
    console.log("10",pageBean.value);
}

//分类搜索
const searchProductBy = async (categoryId, pageNum = 1) => {
    tpye.value = 'category'
    query.value = categoryId
    console.log("categoryId",categoryId);
    

    const response = await axios.get('/api/proListByC', {
        params: {
            pageNum: pageNum,
            pageSize: 6,
            categoryId: categoryId,
        }
    })

    pageBean.value = response.data.pageInfo
    console.log("10",pageBean.value);

}

//换页
const changePage = (page) => {
    if (page < 1 || page > pageBean.value.pages) return

    if (tpye.value === 'category') {
        searchProductBy(query.value, page)
    } else {
        searchProduct(query.value, page)
    }
}

//详细
function toProductDetail(id) {
    router.push({
        path: '/productDetail',
        query: {
            id: id
        }
    })
}


//路由监听
watch(
    () => route.query.name,
    (newName, oldName) => {
        console.log('ID 参数变化:', oldName, '->', newName)
    }
)

// 进入管理页面时隐藏HeaderView
onMounted(() => {
    CollectProduct()
    const searchName = route.query.name
    const categoryId = route.query.id

    // 搜索方式
    if (searchName !== undefined) {
        searchProduct(searchName || '')
    } else if (categoryId) {
        searchProductBy(categoryId)
    } else {
        searchProduct('')
    }

    store.commit('setShowPage', 1)
})

watch(
    () => route.query.name,
    (newName, oldName) => {
        if (newName !== oldName) {
            // 无论是否有新名称都调用搜索方法，没有名称时传空字符串
            searchProduct(newName || '')
        }
    }
)

// 监听 id 查询参数变化
watch(
    () => route.query.id,
    (newId, oldId) => {
        if (newId !== oldId) {
            if (newId) {
                console.log("newId",newId);
                
                searchProductBy(newId)
            } else {
                // 如果 id 参数被清除，可能需要清空搜索结果
                pageBean.value.list = []
            }
        }
    }
)

// 离开管理页面时恢复HeaderView
onUnmounted(() => {
    store.commit('setShowPage', 0)
})

</script>

<style>



.kong_left {
    width: 211px;
    height: 441px;
    overflow: hidden;
    float: left;
}

.like_left {
    width: 211px;
    overflow: hidden;
    float: left;
}

.like_left2 {
    width: 111px;
    overflow: hidden;
    float: left;
}
</style>